<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">新增用药信息</view>

    <!-- 表单 -->
    <view class="form-container">
      <view class="input-group">
        <text class="label">药品名称</text>
        <input type="text" placeholder="请输入药品名称" v-model="medication.name"/>
      </view>

      <view class="input-group">
        <text class="label">用药时间</text>
        <picker mode="time" :value="medication.time" @change="setTime">
          <view class="picker">
            {{ medication.time || '请选择用药时间' }}
          </view>
        </picker>
      </view>

      <view class="input-group">
        <text class="label">剂量</text>
        <input type="text" placeholder="请输入剂量" v-model="medication.dosage"/>
      </view>

      <view class="input-group">
        <text class="label">注意事项</text>
        <textarea placeholder="请输入注意事项" v-model="medication.notes"></textarea>
      </view>

      <!-- 提交按钮 -->
      <button type="primary" @click="submitForm" class="submit-btn">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      medication: {
        name: '',
        time: '',
        dosage: '',
        notes: ''
      }
    }
  },
  methods: {
    setTime(e) {
      this.medication.time = e.detail.value;
    },
    submitForm() {
      if (!this.medication.name || !this.medication.time || !this.medication.dosage) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      console.log('新增用药信息:', this.medication);
      // 这里可以添加提交表单到服务器的逻辑
    }
  }
}
</script>

<style>
/* 主体容器 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff9f2; /* 轻微橙色背景 */
}

/* 标题 */
.title {
  text-align: center;
  color: #f57f17; /* 橙色 */
  font-size: 24px;
  margin-bottom: 20px;
}

/* 表单容器 */
.form-container {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

/* 输入组 */
.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.label {
  color: #333;
  font-weight: bold;
  margin-bottom: 5px;
}

input, textarea {
  padding: 10px;
  border: 1px solid #f57f17;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  height: 100px;
}

/* 时间选择器 */
.picker {
  padding: 10px;
  border: 1px solid #f57f17;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
}

/* 提交按钮 */
.submit-btn {
  background-color: #f57f17;
  color: #fff;
  font-size: 18px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  width: 100%;
}
</style>